import { useStore } from '@/store'
import { Input, NavBar } from 'antd-mobile'
import { useState } from 'react'

import styles from './index.module.scss'

// 声明prop类型注解
type Props = {
  hidePopup: () => void
}

// 1. 回填数据

const EditInput = ({ hidePopup }: Props) => {
  const { userStore } = useStore()
  const [value, setValue] = useState(userStore.userProfile.name)
  const onChange = (value: string) => {
    // 拿到数据之后 反向修改到原始值里面
    // 从store拿到的数据仅仅可以作为一个初始值而存在 不能作为直接修改的数据
    // 因为input输入修改的时候是一个临时的UI状态
    // 每次拿到新输入值时 修改这个临时的value数据
    setValue(value)
  }

  const submit = async () => {
    await userStore.updateUserProfile(value)
    // 关闭弹框
    hidePopup()
    // 后续提示用户
  }
  return (
    <div className={styles.root}>
      <NavBar
        onBack={hidePopup}
        className="navbar"
        right={
          <span onClick={submit} className="commit-btn">
            提交
          </span>
        }>
        编辑昵称
      </NavBar>

      <div className="edit-input-content">
        <h3>昵称</h3>

        <div className="input-wrap">
          <Input placeholder="请输入" onChange={onChange} value={value} />
        </div>
      </div>
    </div>
  )
}

export default EditInput
